<template>
  <!-- 条件筛选 -->
  <div class="page_filter">
    <!-- 搜索框 -->
<!--    <organization-unit style="width: 400px;" v-model="proxyDeptTreeId"  @change="selectOrgHandel" :changeOnSelect='true' placeholder="选择管养单位" custom-class="board_select"  popper-class="board_select-pop"></organization-unit>-->

    <el-select v-model="proxyProjectId" clearable placeholder="选择项目" filterable @change="changeRoad" class="board_select" popper-class="board_select-pop">
      <el-option
        v-for="item in projectList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {projectSelect,} from '@/services/model/project-info'
// import OrganizationUnit from '@/components/organization-unit/all'
export default {
  props: ['deptTreeId', 'roadId', 'slopeId','projectId'],
  // components: { OrganizationUnit },
  data () {
    return {
      projectList: [],
      bidSlopeList: [],
      form:{
        deptTreeId:'',
        roadId:'',
        slopeId:'',
        projectId:''
      }
    }
  },
  computed: {
    proxyDeptTreeId: {
      get () {
        return this.deptTreeId
      },
      set (value) {
        this.$emit('update:deptTreeId', value)
        this.form.deptId = value
      }
    },
    proxyRoadId: {
      get () {
        return this.roadId
      },
      set (value) {
        this.$emit('update:roadId', value)
        this.form.roadId = value
      }
    },
    proxySlopeId: {
      get () {
        return this. proxySlopeId
      },
      set (value) {
        this.$emit('update: proxySlopeId ', value)
        this.form. proxySlopeId = value
      }
    },
    proxyProjectId: {
      get () {
        return this.projectId
      },
      set (value) {
        this.$emit('update:projectId', value)
        this.form.projectId = value
      }
    },
  },
  methods: {

    //获取项目列表
    async getProjectList() {
      const {data} = await projectSelect(this.form.projectId)
      this.projectList = data
    },
    changeRoad() {
      this.$emit('changeRoad')
    },

  },
  mounted() {
    this.getProjectList()
  }
}
</script>
<style lang="less">
@import url('./init-ele-input.less');
</style>

<style lang="less" scoped>
    // select
    @select-bk: #212946;
    @select-hover: #2E3963;
    @select-choose: #1190FE;
    @select-disabled: #ffffff;
    @select-group-title: #ffffff;
    @select-group-border: #ffffff;
    @select-item-span:#D2D7ED;
    @select-choose: #5065b1;
  // select
  .board_select-pop.el-popper {
    .el-select-dropdown__item  {
      background-color: @select-bk;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: @select-hover;
    }
    .el-select-dropdown__item.selected span,
    .el-select-dropdown__item.selected {
      color: @select-choose;
    }
    .el-select-group__title {
      color: @select-group-title;
    }
    .el-select-dropdown__item.is-disabled {
      color: @select-disabled;
    }
    .el-select-group__wrap::after {
      background-color: @select-group-border;
    }
    .el-select-dropdown__item span{
      color: @select-item-span;
    }
  }

  .board_select .el-input.is-focus .el-input__inner {
    border-color: @select-choose;
  }

  .board_select {
    margin-left: 10px;
    .is-focus .el-input__suffix .el-icon-arrow-up{
      color: @select-choose;
    }
  }

  .page_filter {
    display: inline-block;
    position: absolute;
    left: 21%;
    top: 13%;
    z-index: 2;
  }
</style>
